import React, { useEffect, useState } from 'react';
import styles from './index.less';
import cls from 'classnames';
import { connect, Dispatch } from 'umi';
import { ConnectProps, ConnectState } from '@/models/connect';
// import { AppModelState } from '@/models/app';

import { SearchOutlined, LoadingOutlined } from '@ant-design/icons';

interface IProjectList {
  isShowProjList: boolean;
  curProjId: string;
  projectList: any[];
  dispatch: Dispatch;
}

const ProjectList: React.FC<IProjectList> = ({
  dispatch,
  curProjId,
  isShowProjList,
  projectList,
}) => {
  const [keyword, setKeyword] = useState('');

  useEffect(() => {
    if (/projectPage/.test(window.location.href)) {
      return;
    }
    if (window.location.pathname === '/' || /index/.test(window.location.pathname)) {
      return;
    }

    console.log('-0-0-0-0-0-0000000');
    dispatch({
      type: 'kanban/getProjectList',
    });
  }, []);

  function handleInputChange(e) {
    setKeyword(e.target.value);
  }

  function handleProjectClick(item) {
    dispatch({
      type: 'app/pushUrl',
      payload: {
        i: item.id,
        n: item.name,
      },
    });
  }

  return (
    <div
      className={cls(styles.projectList, {
        [styles.projectListActive]: isShowProjList,
      })}
    >
      <div className={styles.search}>
        <SearchOutlined style={{ fontSize: 16, margin: '0 16px', color: '#ffffff' }} />
        <input placeholder="请输入项目关键字" type="text" onChange={handleInputChange} />
      </div>

      <ul className={styles.list}>
        {!!projectList.length &&
          projectList
            .filter(e => {
              if (!keyword) {
                return e;
              }
              return e.projectName.indexOf(keyword) !== -1;
            })
            .map(e => {
              return (
                <li
                  key={e.projectId}
                  onClick={() => handleProjectClick({ name: e.projectName, id: e.projectId })}
                >
                  {e.projectName}
                  {/* {e.name} */}
                  <div className={styles.divider} />
                </li>
              );
            })}
      </ul>
    </div>
  );
};

// @ts-ignore
export default connect(({ app, kanban }: ConnectState) => {
  return {
    isShowProjList: app.isShowProjList,
    curProjId: app.curProjId,

    projectList: kanban.projList,
  };
})(ProjectList);
